<template>
    <div class="view">
        <FormBase v-model="ResData" />
        <!-- 动态组件的一种应用方式 -->
        <component v-model="ResData" :is="'Table' + ResData.job"></component>
        <br />
        <Button type="primary" @click="setValue">赋值</Button> <Button type="primary" @click="getValue">获取</Button>
        <br />
        <code>
            <pre>{{ this.SelectValue }}</pre>
        </code>
    </div>
</template>

<script>
import FormBase from './Form_Base.vue'
import TableStudent from './TableStudent.vue'
import TableTeacher from './TableTeacher.vue'

export default {
    components: {
        FormBase,
        TableStudent,
        TableTeacher
    },
    data() {
        return {
            SelectValue: '',
            ResData: {
                job: 'Student',
                userDetail: {
                    username: 'username',
                    password: 'password',
                    age: 18
                },
                otherData: {
                    Student: [
                        { name: 'John Brown', age: 18 },
                        { name: 'Jim Green', age: 24 },
                        { name: 'Joe Black', age: 30 },
                        { name: 'Jon Snow', age: 26 }
                    ],
                    Teacher: [
                        { link: 'John Brown', grade: 18 },
                        { link: 'Jim Green', grade: 24 },
                        { link: 'Joe Black', grade: 30 },
                        { link: 'Jon Snow', grade: 26 }
                    ]
                }
            }
        }
    },
    methods: {
        setValue() {
            var addData = {
                job: 'Student',
                username: 'username',
                password: 'password',
                age: 18,
                Student: [
                    { name: 'John Brown', age: 18 },
                    { name: 'Jim Green', age: 24 },
                    { name: 'Joe Black', age: 30 },
                    { name: 'Jon Snow', age: 26 }
                ],
                Teacher: [
                    { link: 'John Brown', grade: 18 },
                    { link: 'Jim Green', grade: 24 },
                    { link: 'Joe Black', grade: 30 },
                    { link: 'Jon Snow', grade: 26 }
                ]
            }
            this.ResData.job = addData.job
            this.ResData.userDetail = {
                username: addData.username,
                password: addData.password,
                age: addData.age
            }
            this.ResData.otherData.Student = [
                { name: 'John Brown', age: 18 },
                { name: 'Jim Green', age: 24 },
                { name: 'Joe Black', age: 30 },
                { name: 'Jon Snow', age: 26 }
            ]
            this.ResData.otherData.Teacher = [
                { link: 'John Brown', grade: 18 },
                { link: 'Jim Green', grade: 24 },
                { link: 'Joe Black', grade: 30 },
                { link: 'Jon Snow', grade: 26 }
            ]
        },
        getValue() {
            var data = {
                job: this.ResData.userDetail.job,
                username: this.ResData.userDetail.username,
                password: this.ResData.userDetail.password,
                age: this.ResData.userDetail.age,
                Student: this.ResData.otherData.Student,
                Teacher: this.ResData.otherData.Teacher
            }
            this.SelectValue = JSON.stringify(data, '4', '    ')
            // console.JSON(this.ResData)
        }
    }
}
</script>
<style lang="less" scoped>
.viewData {
    height: 300px;
}
</style>